import { Spin } from 'ant-design-vue'

export const PageLoading = {
    name: 'PageLoading',
    props: {
        tip: {
            type: String,
            default: 'Loading..'
        },
        size: {
            type: String,
            default: 'large'
        }
    },
    render() {
        const style = {
            textAlign: 'center',
            background: 'rgba(0,0,0,0.6)',
            position: 'fixed',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            zIndex: 1100
        }
        const spinStyle = {
            position: 'absolute',
            left: '50%',
            top: '40%',
            transform: 'translate(-50%, -50%)'
        }
        return (
            <div style={style}>
                <Spin size={this.size} style={spinStyle} tip={this.tip} />
            </div>
        )
    }
}

const version = '0.0.1'
const loading = {}

loading.newInstance = (Vue, options) => {
    let loadingElement = document.querySelector('body>div[type=loading]')
    if (!loadingElement) {
        loadingElement = document.createElement('div')
        loadingElement.setAttribute('type', 'loading')
        loadingElement.setAttribute('class', 'ant-loading-wrapper')
        document.body.appendChild(loadingElement)
    }

    const cdProps = Object.assign({ visible: false, size: 'large', tip: 'Loading...' }, options)

    const instance = new Vue({
        data() {
            return {
                ...cdProps
            }
        },
        render() {
            const { tip } = this
            const props = {}
            this.tip && (props.tip = tip)
            if (this.visible) {
                return <PageLoading {...{ props }} />
            }
            return null
        }
    }).$mount(loadingElement)

    function update(config) {
        const { visible, size, tip } = { ...cdProps, ...config }
        instance.$set(instance, 'visible', visible)
        if (tip) {
            instance.$set(instance, 'tip', tip)
        }
        if (size) {
            instance.$set(instance, 'size', size)
        }
    }

    return {
        instance,
        update
    }
}

const api = {
    show: function(options) {
        this.instance.update({ ...options, visible: true })
    },
    hide: function() {
        this.instance.update({ visible: false })
    }
}

const install = function(Vue, options) {
    if (Vue.prototype.$loading) {
        return
    }
    api.instance = loading.newInstance(Vue, options)
    Vue.prototype.$loading = api
}

export default {
    version,
    install
}
